前言

嗨，我是Hogan
目前在經營自己的自媒體 hogan.tech
主要分享一些有關於程式碼、軟體和科技業經驗分享
有興趣的讀者可以進一步關注我，進而獲得更多資訊唷！

未來文章一併更新於此網站 Hogan.B Lab
並且包含多語系 繁體中文、英文、日文、簡體中文
觀看分類：React 白話文運動、其他系列

如果想要快速查找其他文章請點選目錄

成立 hogan.tech 的初衷是
希望每個正在這條路上探索的人，
都可以透過 Hogan.tech 嘗試進入程式領域。

前一篇介紹另一個必要的套件- React Router

1. React Router 起源
2. 使用React Router

這一篇會繼續深入介紹 React Router

1. 404Page
2. Nest Route

404Page

複習

透過前一篇可以知道Route的用法

Page.jsx

import React from 'react'
import { Link } from 'react-router-dom'


export function Home() {
    return (
        <div>
            <h1>Hogan Home</h1>
        </div>
    )
}

export function About() {
    return (
        <div>
            <h1>About</h1>
        </div>
    )
}
export function Events() {
    return (
        <div>
            <h1>Events</h1>
        </div>
    )
}
export function Products() {
    return (
        <div>
            <h1>Products</h1>
        </div>
    )
}
export function Contact() {
    return (
        <div>
            <h1>Contact</h1>
        </div>
    )
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import { BrowserRouter as Router } from 'react-router-dom'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <Router >
        <App />
    </Router>
);

App.jsx

import React from 'react'
import { Routes, Route } from 'react-router-dom'
import {
    Home, About, Events, Products, Contact
} from './Page'


export default function App() {
    return (
        <div>
            <Routes>
                <Route path='/' element={<Home />} />
                <Route path='/about' element={<About />} />
                <Route path='/event' element={<Events />} />
                <Route path='/product' element={<Products />} />
                <Route path='/contact' element={<Contact />} />
            </Routes>
        </div>
    )
}

可以知道說現在有五個不同的分頁，輸入對應的子域名，就會顯示不同的元件

我們常常會看到所謂的「404找不到此分頁」的頁面，那我們能否客製化呢？

答案當然是可以的，首先要先建立一個Page404元件

Page404.jsx

export function Page404(){
    return(
        <div>
            <h1>Cannot find the page</h1>
        </div>
    )
}

接下來只需要在App.js裡面設定， path="*" 就可以設定其餘的分頁都顯示Page404元件

App.js

export default function App() {
    return (
        <div>
            <Routes>
                <Route path='/' element={<Home />} />
                <Route path='/about' element={<About />} />
                <Route path='/event' element={<Events />} />
                <Route path='/product' element={<Products />} />
                <Route path='/contact' element={<Contact />} />
                <Route path='*' element={<Page404 />} />
            </Routes>
        </div>
    )
}

我們也可以使用React Router 內建的Hook 獲得路徑的一些參數

用以下的例子來說，我們可以獲得 location 中的 pathname

Page404.jsx

import { useLocation } from "react-router-dom"

export function Page404(){
    let location = useLocation();
    console.log(location)
    return(
        <div>
            <h1>Cannot find the page</h1>
        </div>
    )
}

Route Nesting

目前我們已經設置好了幾個分頁，用圖形表示的話

/Home Page
	/About
	/Event
	/Product
	/Contact
/404 Page

那如果我又希望可以在About 子分頁裡面設置幾個階層更低的子分頁呢？

/Home Page
	/About
		/History
		/Services
		/Location
	/Event
	/Product
	/Contact
/404 Page

我們就必須要在App.js 中建構出巢狀Route

import React from 'react'
import { Routes, Route } from 'react-router-dom'
import {
    Home, About, Events, Products, Contact, History, Services, Location
} from './Page'
import { Page404 } from './Page404'


export default function App() {
    return (
        <div>
            <Routes>
                <Route path='/' element={<Home />} />
                <Route path='/about' element={<About />} >
                    <Route path='/history' element={<History />} />
                    <Route path='/services' element={<Services />} />
                    <Route path='/location' element={<Location />} />
                </Route>
                <Route path='/event' element={<Events />} />
                <Route path='/product' element={<Products />} />
                <Route path='/contact' element={<Contact />} />
                <Route path='*' element={<Page404 />} />
            </Routes>
        </div>
    )
}

其中我們還必須要使用 About 元件中使用 Outlet 的內建元件

React Router就會自動渲染巢狀元件內的內容了

export function About() {
    return (
        <div>
            <h1>About</h1>
            <Outlet />
        </div>
    )
}

結語

這一篇也另外講解了，如何使用React Router 做出404頁面

以及如果要新增更低階層的子分頁，應該怎麼新增

如果有任何建議與疑問也歡迎留言！

如果喜歡此系列文章，請不吝於按下喜歡及分享，讓更多人看到唷～